<template>
    <div>
        <div id="mydiv">
            <!-- 角色表格  -->
            <el-table
                    :data="roleTable"
                    border
                    style="width: 100%"
                    :header-cell-style="getRowClass">
                <el-table-column
                        prop="roleid"
                        label="角色编号"
                >
                </el-table-column>
                <el-table-column
                        prop="rolename"
                        label="角色名称"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="300"
                >
                    <template slot-scope="scope">
                        <el-button type="success" @click="updatePermission(scope.row.roleid)" size="small" icon="el-icon-edit" plain>修改权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--修改权限的弹出层-->
            <el-dialog
                    title="提示"
                    :visible.sync="updatePermissiondialogVisible"
                    width="30%">
                <!--            data:树型的数据-->
                <!--            default-expanded-keys:默认展开项-->
                <!--            default-checked-keys:默认选中项-->
                <el-tree
                        :data="data"
                        show-checkbox
                        node-key="permissionid"
                        ref="tree"
                        :props="defaultProps">
                </el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updatePermissiondialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmPermission">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Permission",
        data(){
            return{
                roleTable:[],
                //控制权限弹出层的隐藏和显示
                updatePermissiondialogVisible:false,
                //树型菜单数据
                data: [],
                //被选中中菜单项目
                checkedKeys:[],
                //被选中的角色id
                roleid:"",
                defaultProps: {
                    children: 'children',
                    label: 'permissionname'
                },

            }
        },
        created() {
            this.onSubmit();
        },
        methods:{
            // 表头样式
            getRowClass() {
                return "background:#4841C1; color:#fff;";
            },
            onSubmit(){
                this.$http.post("/permission/permission/selectAll").then(result=>{
                    console.log(result);
                    this.roleTable=result.data.data;
                })
            },
            // 确认分配权限
            confirmPermission(){
                var checkedNode = this.$refs.tree.getCheckedNodes(false,true);
                var ids = [];
                checkedNode.forEach(item =>{
                    ids.push(item.permissionid);
                })
                this.$http.post("/permission/permission/yes?roleid="+this.roleid,ids).then(result=>{
                    console.log(result)
                    if (result.data.code===2000){
                        this.$message.success("分配权限成功")
                        this.updatePermissiondialogVisible = false;
                        this.$router.go(0);
                    }
                })
            },
            //修改权限按钮事件
            updatePermission(id) {
                this.roleid=id;
                console.log(id+"===========================================")
                this.updatePermissiondialogVisible = true;
                this.$http.post("/permission/permission/menu?id="+id).then(result=>{
                    console.log(result);
                    this.data=result.data.data.data;
                    setTimeout(() =>{
                        result.data.data.collect.forEach(value => {
                            this.$refs.tree.setChecked(value,true,false);
                        })},100)
                })
            },
        }
    }
</script>

<style>
    #mydiv{
        align-content: center;
        text-align: center;
    }
</style>